<template>
	<view class="addWorks">
		<!-- #ifndef MP-TOUTIAO -->
		<view class="fixedTop">
			<u-status-bar></u-status-bar>
			<view style="height: 88rpx;display: flex;align-items: center;">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon6.png" mode="scaleToFill"
					@click="navigateBack()"></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- :latitude="30.327146" :longitude="120.173615" -->
		<!-- <map id="myMap" class="map" :scale="14" :enable-scroll="false" :enable-zoom="false" :show-location="true"></map> -->
		<view class="map"></view>
		<view class="from">
			<view class="title">
				<input class="inp" placeholder="添加标题" border="none" v-model="parameter.title"></input>
			</view>
			<view class="type" @click="pickerShow(1)">
				<view class="left" :class="type?'xz':''">
					{{type || "选择类型"}}
				</view>
				<image class="right-icon" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon4.png"
					mode="scaleToFill">
			</view>
			<view class="label" @click="pickerShow(2)">
				<view class="left" :class="label?'xz':''">
					{{label || "选择标签"}}
				</view>
				<image class="right-icon" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon4.png"
					mode="scaleToFill">
			</view>
			<view v-if="!parameter.id" class="label" @click="pickerShow(3)">
				<view class="left" :class="activity?'xz':''">
					{{activity || "选择活动"}}
				</view>
				<image class="right-icon" src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon4.png"
					mode="scaleToFill">
			</view>
			<view class="desc">
				<textarea class="textarea" placeholder="请输入文案" :maxlength="-1" v-model="parameter.desc" />
				<!-- <input class="inp" placeholder="添加标题" border="none" v-model="parameter.title"></input> -->
			</view>
			<view class="content">
				<view class="tit">
					添加封面
				</view>
				<view class="img-data">
					<view v-if="parameter.image" class="imgItem">
						<image :src="parameter.image" mode="scaleToFill"></image>
						<view class="sc">
							<u-icon name="close-circle-fill" @click="parameter.image = ''"></u-icon>
						</view>
					</view>
					<view v-if="!parameter.image" class="add" @click="upCover"></view>
				</view>
			</view>
			<view class="content">
				<view class="tit">
					添加内容
				</view>
				<view v-if="parameter.type == 1" class="img-data">
					<view class="imgItem" v-for="(v,i) in parameter.content" :key="i">
						<image :src="v" mode="scaleToFill"></image>
						<view class="sc">
							<u-icon name="close-circle-fill" @click="scContent(i)"></u-icon>
						</view>
					</view>
					<view class="add" @click="upImgVideo('img')"></view>
				</view>
				<view v-else-if="parameter.type == 2" class="video-data">
					<view v-if="parameter.content[0]" class="videoItem">
						<video :src="parameter.content[0]"></video>
						<view class="sc">
							<u-icon name="close-circle-fill" size="20" @click="parameter.content= []"></u-icon>
						</view>
					</view>
					<view v-if="parameter.type == 2 && !parameter.content.length" class="add"
						@click="upImgVideo('video')"></view>
				</view>
				<view v-else-if="parameter.type == 3" class="address">
					<view class="btn" @click="chooseMap">选择地址</view>
					<view class="details" v-if="address">
						<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon5.png"
							mode="scaleToFill"></image>
						<text>{{address}}</text>
					</view>
				</view>
				<view v-else class="default" @click="defaultUp"></view>
			</view>
			<view class="switchIf">
				<view class="titName">是否公开</view>
				<view class="dad">
					<text>否</text>
					<u-switch v-model="parameter.is_open" :inactiveValue="0" :activeValue="1"></u-switch>
					<text>是</text>
				</view>
			</view>
		</view>
		<view class="release" @click="searchFrom">
			{{parameter.id ? "确认编辑" :"发布"}}
		</view>
		<!-- 选择器 -->
		<u-picker v-if="show" :show="show" :columns="pType==1?columns1:pType==2?columns2:columns3" keyName="title"
			closeOnClickOverlay @close="close" @cancel="close" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				type: "",
				label: "",
				address: "",
				parameter: {
					image: "", //true	string		作品封面
					title: "", //true	string		作品标题
					desc: "", // 文案
					longitude: "", //false	string		经度 作品类型为位置要传
					latitude: "", //false	string		纬度
					content: [], //true	string		作品内容 图片或视频地址
					category_id: "", //true	int		分类id
					type: "", //true	int		类型 1图片 2视频 3位置
					activity_id: 0, //true	int		活动id 正常发布传0
					is_open: 0,
					// #ifdef MP-TOUTIAO
					auth_type: 1, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef MP-WEIXIN
					auth_type: 2, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
					// #ifdef H5
					auth_type: 4, //请求来源 1抖音 2微信 3快手 4手机h5
					// #endif
				},
				pType: "",
				columns1: [
					[{
						title: "图片",
						id: 1
					}, {
						title: "视频",
						id: 2
					}, {
						title: "位置",
						id: 3
					}]
				],
				columns2: [],
				columns3: [],
				activity: "不参与活动",
				AntiTouch: false,
			}
		},
		async onLoad(option) {
			if (option.activity_id) {
				this.parameter.activity_id = option.activity_id;
			}
			await this.workCategory()
			await this.activityList()
			if (option.worksId) {
				uni.setNavigationBarTitle({
					title: "编辑作品"
				});
				this.myWorkInfo(option.worksId)
			}
		},
		methods: {
			//用户笔记详情
			async myWorkInfo(id) {
				let res = await this.$http("api/userWork/myWorkInfo", {
					id
				}, "GET")
				if (res.code == 200) {
					res.result.content = res.result.content.split(",")
					this.type = res.result.type == 1 ? "图片" : res.result.type == 2 ? "视频" : "地址"
					this.columns2[0].map(v => {
						if (v.id == res.result.category_id) {
							this.label = v.title
						}
					})
					this.columns3[0].map(v => {
						if (v.id == res.result.activity_id) {
							this.activity = v.title
						}
					})
					this.parameter = res.result
				}
			},
			scContent(index) {
				this.parameter.content.splice(index, 1);
			},
			searchFrom() {
				if (this.AntiTouch) return

				let data = JSON.parse(JSON.stringify(this.parameter))

				if (!data.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!data.desc) {
					uni.showToast({
						title: '请输入文案',
						icon: 'none'
					})
					return
				}
				if (!data.type) {
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					})
					return
				}
				if (!data.category_id) {
					uni.showToast({
						title: '请选择标签',
						icon: 'none'
					})
					return
				}
				if (!data.image) {
					uni.showToast({
						title: '请上传封面',
						icon: 'none'
					})
					return
				}
				if (data.type == 1 || data.type == 2) {
					if (data.content.length < 1) {
						uni.showToast({
							title: '请上传内容',
							icon: 'none'
						})
						return
					}
				}
				if (data.type == 3 && !data.longitude) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				this.AntiTouch = true
				data.content = data.content.join(',')
				if (data.id) {
					this.editWork(data)
				} else {
					this.addWorkBtn(data)
				}
			},
			// 编辑作品
			async editWork(data) {
				uni.showLoading({
					title: '上传中'
				});
				let res = await this.$http("api/userWork/editWork", data, "GET")
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '编辑成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						this.AntiTouch = false
						uni.redirectTo({
							url: `/pages/works/details?id=${res.result.work_id}`
						})
					}, 2000);
				} else {
					this.AntiTouch = false
				}
			},
			//发布作品
			async addWorkBtn(data) {
				uni.showLoading({
					title: '上传中'
				});
				let res = await this.$http("api/userWork/addWork", data)
				// console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: '发布成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						this.AntiTouch = false
						uni.redirectTo({
							url: `/pages/works/details?id=${res.result.work_id}`
						})
					}, 2000);
				} else {
					this.AntiTouch = false
				}
			},
			//活动列表
			async activityList() {
				let res = await this.$http("api/work/activityList", {
					is_afoot: 1, //false	int		是否是进行中的活动 0不是 1是
					page: 1, //true	int		当前页
					size: 100, //true	int		每页多少条
				})
				if (res.code == 200) {
					res.result.data.unshift({
						title: "不参与活动",
						id: 0
					})
					this.columns3 = [res.result.data]
				}
			},

			//作品分类列表
			async workCategory() {
				let res = await this.$http("api/work/workCategory", {}, "GET")
				// console.log(res);
				this.columns2 = [res.result]
			},
			// 上传封面
			upCover() {
				// #ifdef H5
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						// return
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].path,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.parameter.image = `${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifndef H5
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (res) => {
						console.log(res);
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							header: {
								"token": uni.getStorageInfoSync("token")
							},
							success: (res) => {
								res = JSON.parse(res.data);
								if (res.code == 200) {
									this.parameter.image = `${res.result.url}${res.result.path}`
									uni.hideLoading();
								} else {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.showToast({
									title: '请稍后再试',
									icon: 'none'
								})
							}
						});
					},
				})
				// #endif
			},
			// 上传图片视频
			upImgVideo(value) {
				let count;
				let mediaType;
				if (value == "img") {
					count = 9
					mediaType = ['image']

				} else {
					count = 1
					mediaType = ['video']
				}
				// #ifdef H5
				if (mediaType[0] == "image") {
					uni.chooseImage({
						success: (res) => {
							console.log(res);
							uni.showLoading({
								title: '上传中'
							});
							res.tempFiles.map(v => {
								// if (this.parameter.content.length >= 9) {
								// 	uni.hideLoading();
								// 	return
								// }
								// console.log(v);
								uni.uploadFile({
									url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
									filePath: v.path,
									name: 'file',
									header: {
										"token": uni.getStorageInfoSync("token")
									},
									success: (res) => {
										res = JSON.parse(res.data);
										if (res.code == 200) {
											this.parameter.content.push(
												`${res.result.url}${res.result.path}`);
											uni.hideLoading();
											console.log(this.parameter.content);
										} else {
											uni.showToast({
												title: '请稍后再试',
												icon: 'none'
											})
										}
									},
									fail: (err) => {
										console.log(err);
										uni.showToast({
											title: '请稍后再试',
											icon: 'none'
										})
									}
								});
							})
						}
					});
				} else if (mediaType[0] == "video") {
					uni.chooseVideo({
						success: (res) => {
							console.log(res);
							uni.showLoading({
								title: '上传中'
							});
							uni.uploadFile({
								url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
								filePath: res.tempFilePath,
								name: 'file',
								header: {
									"token": uni.getStorageInfoSync("token")
								},
								success: (res) => {
									res = JSON.parse(res.data);
									if (res.code == 200) {
										this.parameter.content.push(
											`${res.result.url}${res.result.path}`);
										uni.hideLoading();
										console.log(this.parameter.content);
									} else {
										uni.showToast({
											title: '请稍后再试',
											icon: 'none'
										})
									}
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							});
						}
					});
				}
				// #endif
				// #ifndef H5
				uni.chooseMedia({
					count: count,
					mediaType: mediaType,
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						});
						res.tempFiles.map(v => {
							// if (this.parameter.content.length >= 9) {
							// 	uni.hideLoading();
							// 	return
							// }
							uni.uploadFile({
								url: `${getApp().globalData.baseUrl}api/common/uploadFile`,
								filePath: v.tempFilePath,
								name: 'file',
								header: {
									"token": uni.getStorageInfoSync("token")
								},
								success: (res) => {
									res = JSON.parse(res.data);
									if (res.code == 200) {
										this.parameter.content.push(
											`${res.result.url}${res.result.path}`);
										uni.hideLoading();
									} else {
										uni.showToast({
											title: '请稍后再试',
											icon: 'none'
										})
									}
								},
								fail: (err) => {
									uni.showToast({
										title: '请稍后再试',
										icon: 'none'
									})
								}
							});
						})
					},
				})
				// #endif
			},
			defaultUp() {
				uni.showToast({
					title: '请选择类型',
					icon: 'none'
				})
			},
			// 选择位置
			chooseMap() {
				uni.chooseLocation({
					// latitude: 30.327146,
					// longitude: 120.173615,
					success: res => {
						this.parameter.latitude = res.latitude
						this.parameter.longitude = res.longitude
						this.address = res.address
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			pickerShow(value) {
				this.pType = value
				this.show = true
			},
			confirm(e) {
				// console.log(11, e);
				if (this.pType == 1) {
					this.type = e.value[0].title
					this.parameter.type = e.value[0].id
					this.parameter.content = []
					this.parameter.latitude = ""
					this.parameter.longitude = ""
				} else if (this.pType == 2) {
					this.label = e.value[0].title
					this.parameter.category_id = e.value[0].id
				} else if (this.pType == 3) {
					this.activity = e.value[0].title
					this.parameter.activity_id = e.value[0].id
				}
				this.show = false
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.addWorks {
		padding-bottom: 220rpx;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}

		.map {
			width: 100vw;
			height: 734rpx;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/work_back.png);
			background-size: 100% 100%;
		}

		.from {
			padding: 32rpx;

			.title {
				display: flex;
				align-items: center;
				height: 104rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 16rpx;

				.inp {
					flex: 1;
					margin: 0 24rpx;
					font-weight: bold;
					font-size: 28rpx;

					.input-placeholder {
						font-weight: bold;
						font-size: 28rpx;
						color: #CACACA;
					}
				}
			}

			.desc {
				display: flex;
				align-items: center;
				background: #FFFFFF;
				min-height: 104rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 16rpx;

				.textarea {
					flex: 1;
					margin: 24rpx;
					font-weight: bold;
					font-size: 28rpx;
					height: 200rpx;

					.uni-textarea-placeholder {
						font-weight: bold;
						font-size: 28rpx;
						color: #CACACA;
					}
				}
			}

			.type,
			.label {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 104rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 16rpx;
				padding: 0 24rpx;

				.left {
					font-weight: bold;
					font-size: 28rpx;
					color: #8D8F90;
				}

				.xz {
					color: #333333;
				}

				.right-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.content {
				.tit {
					font-weight: bold;
					font-size: 28rpx;
					color: #8D8F90;
					padding: 8rpx 0 32rpx 0;
				}

				.img-data {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.imgItem,
					.add {
						position: relative;
						width: 152rpx;
						height: 152rpx;
						margin: 0 24rpx 24rpx 0;

						image {
							width: 100%;
							height: 100%;
						}

						.sc {
							position: absolute;
							top: -16rpx;
							right: -16rpx;
						}
					}

					.add {
						background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/addContent.png") no-repeat;
						background-size: 100% 100%;
						margin-right: 0;
					}

					.imgItem:nth-child(4n) {
						margin-right: 0;
					}
				}

				.video-data {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.videoItem {
						position: relative;
						width: 236rpx;
						height: 420rpx;
						margin-right: 24rpx;

						video {
							width: 100%;
							height: 100%;
						}

						.sc {
							position: absolute;
							top: -16rpx;
							right: -16rpx;
						}
					}

					.add {
						width: 152rpx;
						height: 152rpx;
						background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/addContent.png") no-repeat;
						background-size: 100% 100%;
					}
				}

				.address {
					.btn {
						width: 144rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #FFFFFF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						text-align: center;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
					}

					.details {
						display: flex;
						align-items: center;
						padding: 16rpx 0;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							font-weight: bold;
							font-size: 20rpx;
							color: #8D8F90;
							padding: 0 4rpx;
						}

					}
				}

				.default {
					width: 152rpx;
					height: 152rpx;
					background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/addContent.png") no-repeat;
					background-size: 100% 100%;
				}
			}

			.switchIf {
				display: flex;
				align-items: center;
				padding: 35rpx 0;

				.titName {
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}

				.dad {
					display: flex;
					align-items: center;
					padding: 0 20rpx;

					text {
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						padding: 15rpx;
					}
				}
			}
		}

		.release {
			position: fixed;
			bottom: 100rpx;
			left: calc(50% - 303rpx);
			width: 606rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: #333333;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>